<template>
  <el-dialog
    :visible="dialogVisible"
    :title="`操作`"
    width="30%"
    @close="closeDialog()">
    <table v-loading="dialogLoading" v-if="mode === 'signup'" class="table">
      <tr>
        <td class="title">报名状态</td>
        <!-- <td>{{ resJson.status }} - status</td> -->
        <td>
          <el-button
            :type="resJson.status == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('status', 1)"
          >
            开启
          </el-button>
          <el-button
            :type="resJson.status == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('status', 0)">
            关闭
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">小程序是否可见</td>
      </tr>
      <tr colspan="3"><td class="emptyLine">&nbsp;</td></tr>
      <!-- -------------------------------------------------------------------------------- -->
      <tr>
        <td class="title">报名开启状态</td>
        <!-- <td>{{ resJson.openStatus }} - openStatus</td> -->
        <td>
          <el-button
            :type="resJson.openStatus == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('openStatus', 1)">
            开始
          </el-button>
          <el-button
            :type="resJson.openStatus == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('openStatus', 0)">
            结束
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">是否允许报名</td>
      </tr>
      <tr colspan="3"><td class="emptyLine">&nbsp;</td></tr>
      <!-- -------------------------------------------------------------------------------- -->
      <tr>
        <td class="title">显示隐藏数量</td>
        <!-- <td>{{ resJson.showNumStatus }} - showNumStatus</td> -->
        <td>
          <el-button
            :type="resJson.showNumStatus == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('showNumStatus', 1)">
            显示
          </el-button>
          <el-button
            :type="resJson.showNumStatus == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('showNumStatus', 0)">
            隐藏
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">报名数量是否可见</td>
      </tr>
    </table>
    <!-- ======================================================================== -->
    <!-- ======================================================================== -->
    <!-- ======================================================================== -->
    <!-- ======================================================================== -->
    <!-- ======================================================================== -->
    <table v-loading="dialogLoading" v-if="mode === 'activity'" class="table">
      <tr>
        <td class="title">征集活动状态</td>
        <!-- <td>{{ resJson.status }} - status</td> -->
        <td>
          <el-button
            :type="resJson.status == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('status', 1)"
          >
            开启
          </el-button>
          <el-button
            :type="resJson.status == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('status', 0)">
            关闭
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">小程序是否可见</td>
      </tr>
      <tr colspan="3"><td class="emptyLine">&nbsp;</td></tr>
      <!-- -------------------------------------------------------------------------------- -->
      <tr>
        <td class="title">上传作品状态</td>
        <!-- <td>{{ resJson.openStatus }} - openStatus</td> -->
        <td>
          <el-button
            :type="resJson.openStatus == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('openStatus', 1)">
            开始
          </el-button>
          <el-button
            :type="resJson.openStatus == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('openStatus', 0)">
            结束
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">控制能否上传作品</td>
      </tr>
      <tr colspan="3"><td class="emptyLine">&nbsp;</td></tr>
      <!-- -------------------------------------------------------------------------------- -->
      <tr>
        <td class="title">显示隐藏数量</td>
        <!-- <td>{{ resJson.showNumStatus }} - showNumStatus</td> -->
        <td>
          <el-button
            :type="resJson.showNumStatus == 0 ? '' : 'success'"
            size="small"
            @click="changeStatus('showNumStatus', 1)">
            显示
          </el-button>
          <el-button
            :type="resJson.showNumStatus == 1 ? '' : 'success'"
            size="small"
            @click="changeStatus('showNumStatus', 0)">
            隐藏
          </el-button>
        </td>
      </tr>
      <tr>
        <td class="tips" colspan="3">作品数量是否可见</td>
      </tr>
    </table>
    <span slot="footer" class="dialog_footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirm()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    mode: {
      type: String,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      required: true
    },
    statusJson: {
      type: Object,
      default: function() {
        return {}
      }
    },
    dialogLoading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      resJson: {
        status: 0,
        recommendStatus: 0,
        openStatus: 0,
        showNumStatus: 0
      }
    }
  },
  watch: {
    statusJson: {
      handler: function(newVal, oldVal) {
        // console.log('oldVal:', oldVal)
        // console.log('newVal:', newVal)
        // this.resJson = Object.assign({}, newVal)
        this.resJson.id = newVal.id
        this.resJson.status = newVal.status
        this.resJson.recommendStatus = newVal.recommendStatus
        this.resJson.openStatus = newVal.openStatus
        this.resJson.showNumStatus = newVal.showNumStatus
      },
      deep: true
    }
  },
  methods: {
    // 报名状态
    changeStatus(statusName, status) {
      this.resJson[statusName] = status
    },
    closeDialog() {
      this.resJson = Object.assign({}, this.statusJson)
      this.$emit('update:dialogVisible', false)
    },
    confirm() {
      const newData = {}
      newData.id = this.resJson.id
      if (this.statusJson.status !== this.resJson.status) {
        newData.status = this.resJson.status
      }
      if (this.statusJson.openStatus !== this.resJson.openStatus) {
        newData.openStatus = this.resJson.openStatus
      }
      if (this.statusJson.showNumStatus !== this.resJson.showNumStatus) {
        newData.showNumStatus = this.resJson.showNumStatus
      }
      // console.log(newData)
      this.$emit('resData', newData)
      // this.closeDialog()
    }
  }
}
</script>
<style lang="scss" scoped>
.table{
    width: 100%;
    margin: 0 auto;
}
.table td{
    text-align: left;
    border: none;
    // width: 33%;
}
.table tr td:nth-of-type(2) { width:160px;}

.title{
    font-weight: bold;
    font-size: 16px;
}
.tips{
    color: #999;
}
.emptyLine{
    line-height: 20px;
}
</style>
